<template>
  <div id="home">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="this.activePath"
          background-color="#2f4050"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          unique-opened
        >
          <el-menu-item index="/home/welcome" @click="saveNavState('/home/welcome')">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>日期</span>
            </template>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>新闻管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/news" @click="saveNavState('/home/news')">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>所有文章</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/home/write" @click="saveNavState('/home/write')">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>写文章</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/home/categories" @click="saveNavState('/home/categories')">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>分类管理</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/home/common" @click="saveNavState('/home/common')">
            <template slot="title">
              <i class="el-icon-chat-round"></i>
              <span>评论</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/users" @click="saveNavState('/home/users')">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>用户管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/carousel" @click="saveNavState('/home/carousel')">
            <template slot="title">
              <i class="el-icon-picture-outline-round"></i>
              <span>轮播图</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header height="70px">
          <a href="#" id="btn">
            <el-button type="primary" size="medium" icon="el-icon-edit">修改密码</el-button>
          </a>
          <a href="#">
            <el-button type="danger" size="medium" icon="el-icon-close">退出登陆</el-button>
          </a>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
// eslint-disable-next-line semi
export default {
  // eslint-disable-next-line space-before-function-paren
  data () {
    return {
      activePath: ''
    }
  },
  // eslint-disable-next-line space-before-function-paren
  created () {
    // 启动时从sessionStorage获取激活状态
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    // 当点击时将激活状态保存在sessionStorage中
    // eslint-disable-next-line space-before-function-paren
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>
<style lang="less" scoped>
#home {
  width: 100%;
  height: 100%;
}

.el-container {
  width: 100%;
  height: 100%;
}
.el-aside {
  height: 100%;
  width: 180px;
  background-color: rgb(47, 64, 80);
}
.el-main {
  background-color: rgb(248, 249, 251);
}
.el-header {
  background-color: #ffffff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#btn {
  margin-right: 10px;
}
</style>
